<!--排列三-直选-定位 -->
<template>
	<view>
		<view class="number-red">

			<view class="number-red-top">
				<view class="">
					每位至少选择
					<text style="color: red;">1</text>
					个号码，奖金
					<text style="color: red;">1040</text>
					元
				</view>
			</view>
			<view class="number-red-foot">
				<view class="number-red-foot-text">百位</view>
				<view class="number-red-foot-view">
					<view class="number-red-foot-num">0</view>
					<view class="number-red-foot-num">1</view>
					<view class="number-red-foot-num">2</view>
					<view class="number-red-foot-num">3</view>
					<view class="number-red-foot-num">4</view>
					<view class="number-red-foot-num">5</view>
					<view class="number-red-foot-num theRed">6</view>
					<view class="number-red-foot-num">7</view>
					<view class="number-red-foot-num">8</view>
					<view class="number-red-foot-num">9</view>
				</view>
			</view>
			<view class="number-red-foot">
				<view class="number-red-foot-text">十位</view>
				<view class="number-red-foot-view">
					<view class="number-red-foot-num">0</view>
					<view class="number-red-foot-num">1</view>
					<view class="number-red-foot-num">2</view>
					<view class="number-red-foot-num">3</view>
					<view class="number-red-foot-num">4</view>
					<view class="number-red-foot-num">5</view>
					<view class="number-red-foot-num">6</view>
					<view class="number-red-foot-num">7</view>
					<view class="number-red-foot-num theRed">8</view>
					<view class="number-red-foot-num">9</view>
				</view>
			</view>
			<view class="number-red-foot">
				<view class="number-red-foot-text">个位</view>
				<view class="number-red-foot-view">
					<view class="number-red-foot-num">0</view>
					<view class="number-red-foot-num theRed">1</view>
					<view class="number-red-foot-num">2</view>
					<view class="number-red-foot-num">3</view>
					<view class="number-red-foot-num">4</view>
					<view class="number-red-foot-num">5</view>
					<view class="number-red-foot-num">6</view>
					<view class="number-red-foot-num">7</view>
					<view class="number-red-foot-num">8</view>
					<view class="number-red-foot-num">9</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>

	const props = defineProps({
		item: {
			type: Object,
			default () {},
		},
	});
</script>

<style lang="scss" scoped>
	.number-red {
		border-top: #eaeaea solid 1px;
		width: 100vw;
	}

	.number-red-top {
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: flex-end;
		width: 100%;
		color: #999;
		padding: 10px 15px 7px 15px;
		font-size: 12px;
	}

	.number-red-foot {
		height: 30vw;
		width: 100vw;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		align-items: center;
		padding: 0 7px;
		border-bottom: #eaeaea solid 1px;
	}

	.number-red-foot-text {
		height: 23vw;
		width: 17vw;
		text-align: center;
		line-height: 5vh;
		color: #999;
		font-size: 15px;
	}

	.number-red-foot-view {
		height: 23vw;
		width: 83vw;
	}

	.number-red-foot-num {
		float: left;
		width: calc((100vw - 14px)/ 7 - 14px);
		height: calc((100vw - 14px)/ 7 - 14px);
		border: #eaeaea solid 1px;
		border-radius: 50%;
		text-align: center;
		line-height: calc((100vw - 14px)/ 7 - 14px);
		margin: 0 7px 7px 7px;
		font-size: 15px;
		color: red;
	}
	.theRed{
	    background: #fe0000;
	    border-color: #fe0000;
	    color: #fff!important;
	}
</style>